<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>采购管理</cite></a>
        <a><cite>采购订单入库</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">采购订单入库</div>
        <div class="layui-card-body">
            <!-- 表格 -->
            <table id="orders-in-table-parseData" lay-filter="orders-in-table-parseData"></table>
        </div>
    </div>
</div>


<!-- 双击表格行弹出框 -->
<script id="search" type="text/html">
    <div style="padding: 15px 30px;">
        <!-- <button type="button" class="layui-btn" title="入库" id="doCheck">
            <i class="layui-icon layui-icon-search"></i> 入库
        </button> -->
        <table class="layui-table">
            <tbody id="searchBody"></tbody>
        </table>
        <table class="layui-table" style="margin-top: 30px;" lay-filter="in-demo">
            <thead>
            <tr style="background-color: #f8f8f8;">
                <!-- <th style="display: none;" lay-data="{field:'uuid'}">ID</th> -->
                <th lay-data="{field:'uuid'}">商品编号</th>
                <th lay-data="{field:'goodsname'}">商品名称</th>
                <th lay-data="{field:'price'}">价格</th>
                <th lay-data="{field:'num'}">数量</th>
                <th lay-data="{field:'money'}">金额</th>
                <th lay-data="{field:'state'}">状态</th>
            </tr>
            </thead>
            <tbody id="titleBody"></tbody>
        </table>
    </div>
</script>

<!-- 双击商品入库弹出框 -->
<script id="in" type="text/html">
    <form class="layui-form" lay-filter="in">
        <div class="layui-row">
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 30px;">
                    <label class="layui-form-label">仓库:</label>
                    <div class="layui-input-block">
                        <select name="store" id="store" required lay-verify="required">
                            <option value="">---请选择入库仓库---</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">商品编号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="uuid" required lay-verify="required" disabled placeholder="商品编号"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">商品名称:</label>
                    <div class="layui-input-block">
                        <input type="text" name="goodsname" required lay-verify="required" disabled placeholder="商品名称"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 layui-col-md-offset1">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">数量:</label>
                    <div class="layui-input-block">
                        <input type="text" name="num" required lay-verify="required" disabled placeholder="数量"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-row" style="display: none;">
                <div class="layui-col-md8 layui-col-md-offset1">
                    <div class="layui-form-item" style="margin-top: 10px;">
                        <label class="layui-form-label">id:</label>
                        <div class="layui-input-block">
                            <input type="text" name="uuid" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row" style="margin-top:30px">
            <div class="layui-form-item">
                <div class="layui-col-md8 layui-col-md-offset4">
                    <div class="layui-form-item">
                        <button type="button" class="layui-btn" onclick="editShop()">确认</button>
                        <button type="button" class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>
<script>
    layui.use(['admin', 'table', 'form'], function () {
        var admin = layui.admin
            , table = layui.table
            , form = layui.form
            , baseUrl = layui.setter.baseUrl
            , $ = layui.$;

        // 表格渲染
        var tableIns = table.render({
            elem: '#orders-in-table-parseData'
            // 请求地址
            , url: baseUrl + 'orders/listByPage?state=2'
            , toolbar: true
            , title: '采购申请表'
            , cellMinWidth: 120
            // 是否开启加载loding
            , loading: true
            // 数据渲染规定
            , cols: [[
                {field: 'uuid', title: '编号', width: 110}
                , {
                    field: 'createtime',
                    title: '下单日期',
                    templet: '<div>{{d.createtime ? d.createtime.substring(0,10) : ""}}</div>'
                }
                , {field: 'creatername', title: '下单员'}
                , {
                    field: 'checktime',
                    title: '审核日期',
                    templet: '<div>{{d.checktime ? d.checktime.substring(0,10) : ""}}</div>'
                }
                , {field: 'checkername', title: '审核员'}
                , {
                    field: 'starttime',
                    title: '采购日期',
                    templet: '<div>{{d.starttime ? d.starttime.substring(0,10) :""}}</div>'
                }
                , {field: 'startername', title: '采购员'}
                , {field: 'suppliername', title: '供应商'}
                , {field: 'totalmoney', title: '合计金额'}
                , {
                    field: 'state',
                    title: '状态',
                    templet: '<div>{{d.state == 0 ? "未审核" : d.state == 1 ? "已审核" : d.state == 2 ? "已确认" : d.state == 3 ? "已入库" : ""}}</div>'
                }
            ]]
            // 开启分页
            , page: true
            , request: {
                pageName: 'page',
                limitName: 'rows'
            }
            , response: {
                // statusName: 'code',
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
        });
        // 双击表格弹窗
        table.on('rowDouble(orders-in-table-parseData)', function (obj) {
            var data = obj.data;

            var tableTr = `
            <tr>
                <td class="bgc-ebf2ff">流水号</td>
                <td>${data.uuid ? data.uuid : ''}</td>
                <td class="bgc-ebf2ff">供应商</td>
                <td colspan="3">${data.suppliername ? data.suppliername : ''}</td>
                <td class="bgc-ebf2ff">状态</td>
                <td>${data.state == 0 ? '未审核' : data.state == 1 ? '已审核' : data.state == 2 ? '已确认' : data.state == 3 ? '已入库' : ''}</td>
            </tr>
            <tr>
                <td class="bgc-ebf2ff">下单员</td>
                <td>${data.creatername ? data.creatername : ''}</td>
                <td class="bgc-ebf2ff ">审核员</td>
                <td  width="100px">${data.checkername ? data.checkername : ''}</td>
                <td class="bgc-ebf2ff">采购员</td>
                <td width="100px">${data.startername ? data.startername : ''}</td>
                <td class="bgc-ebf2ff">库管员</td>
                <td width="100px">${data.endername ? data.endername : ''}</td>
            </tr>
            <tr>
                <td class="bgc-ebf2ff">下单日期</td>
                <td>${data.createtime ? data.createtime.substring(0, 10) : ''}</td>
                <td class="bgc-ebf2ff">审核日期</td>
                <td>${data.checktime ? data.checktime.substring(0, 10) : ''}</td>
                <td class="bgc-ebf2ff">采购日期</td>
                <td>${data.starttime ? data.starttime.substring(0, 10) : ''}</td>
                <td class="bgc-ebf2ff">入库日期</td>
                <td>${data.endtime ? data.endtime.substring(0, 10) : ''}</td>
            </tr>
            <tr>
                <td class="bgc-ebf2ff">运单号</td>
                <td colspan="7">运单号数据</td>
            </tr>
            `

            var layerIndex = layer.open({
                title: "入库",
                type: 1,
                move: false,
                area: ['1000px', '500px'],
                content: $('#search').html()
            });
            $('#searchBody').append(tableTr);
            $.each(data.orderDetailList, (index, item) => {
                $('#titleBody').append(
                    `<tr>
                        <td>${item.uuid}</td>
                        <td>${item.goodsname}</td>
                        <td>${item.price}</td>
                        <td>${item.num}</td>
                        <td>${item.money}</td>
                        <td>${item.state == 0 ? '未入库' : item.state == 1 ? '已入库' : ''}</td>
                    </tr>`
                )
            })
            $('#doCheck').click(function () {

                admin.req({
                    url: baseUrl + `orders/doStart?id=${obj.data.uuid}`,
                    type: 'post',
                    done: function (res) {
                        layer.closeAll();
                        layer.open({
                            title: '新增'
                            , content: res.msg
                        });
                        layui.table.reload('orders-in-table-parseData');
                    }
                })
            })
            table.init('in-demo');
            table.on('row(in-demo)', function (obj) {
                let thisTr = obj.tr;
                let trs = obj.tr.parent().children();
                thisTr.css('background', '#FBEC88').siblings().css('background', '');
            });
            table.on('rowDouble(in-demo)', function (obj) {

                if (obj.data.state == '未入库') {
                    admin.req({
                        url: baseUrl + 'returnorders/selectStore',
                        success: function (res) {
                            $.each(res.data.rows, function (i, item) {
                                $('#store').append(`<option value="${item.uuid}">${item.name}</option>`)
                            })

                            form.val('in', obj.data)
                            form.render(null, 'in');
                        }
                    })
                    layer.open({
                        title: "入库",
                        type: 1,
                        move: false,
                        area: ['500px', '450px'],
                        content: $('#in').html()
                    });
                } else {
                    layer.open({
                        title: '提示',
                        content: '该商品已入库'
                    })
                }
            })
        });
        //单击表格变色
        table.on('row(orders-in-table-parseData)', function (obj) {

            let thisTr = obj.tr;
            let trs = obj.tr.parent().children();
            thisTr.css('background', '#FBEC88').siblings().css('background', '');
        });
    });

    // 关闭弹框
    function closeLayer() {
        layer.close(layer.index);
    }


    // 入库功能提交
    function editShop() {
        var i = layer.confirm('是否要入库该商品？', {
            btn: ['确认', '取消'] //可以无限个按钮
        }, function (index, layero) {
            var data = layui.form.val("in");
            if (data.store == "") {
                layer.msg("请选择仓库！", {icon: 5}); //提示
            } else {
                layui.admin.req({
                    url: layui.setter.baseUrl + 'orderdetail/doInStore',
                    type: 'post',
                    data: {
                        id: data.uuid,
                        storeuuid: data.store
                    },
                    done: function (res) {
                        layer.closeAll();
                        layer.open({
                            title: '入库'
                            , content: res.msg
                        });
                        layui.table.reload('orders-in-table-parseData');
                    }
                })
            }

        }, function (index) {
            layer.close(i);
        });

    }
</script>

<style>
    .layui-form-selectup dl {
        top: 42px;
        bottom: unset;
    }

    .layui-col-md3,
    #reset-btn,
    #search-btn {
        margin-top: 10px;
    }

    .card-add {
        margin-top: 20px;
    }

    /* 弹框样式 */
    .layui-btn-sm {
        line-height: normal;
        font-size: 12.5px;
    }

    .layui-table-view .layui-table-body {
        min-height: 190px;
    }

    .layui-table-cell .layui-input.layui-unselect {
        height: 30px;
        line-height: 30px;
    }

    /*设置 layui 表格中单元格内容溢出可见样式*/
    .table-overlay .layui-table-view,
    .table-overlay .layui-table-box,
    .table-overlay .layui-table-body {
        overflow: visible;
    }

    .table-overlay .layui-table-cell {
        height: auto;
        overflow: visible;
    }

    /*文本对齐方式*/
    .text-center {
        text-align: center;
    }

    #toolbar {
        margin-bottom: 10px;
    }

    .bgc-ebf2ff {
        background-color: #f8f8f8;
    }

    .bgc-FBEC88 {
        background-color: #FBEC88;
    }

    .bgc #layui-layer1 .layui-table tbody tr:hover,
    #layui-layer1 .layui-table thead tr,
    #layui-layer1 .layui-table-click,
    #layui-layer1 .layui-table-header,
    #layui-layer1 .layui-table-hover,
    #layui-layer1 .layui-table-mend,
    #layui-layer1 .layui-table-patch,
    #layui-layer1 .layui-table-tool,
    #layui-layer1 .layui-table[lay-even] tr:nth-child(even) {
        background-color: transparent;
    }
</style>